<template>
  <a-card title="定制表单">
    <vp-panel-form
      :has-anchor="false"
      ref="formRef"
      :formSchema="formSchema1"
      :fields="fields"
      :onValueChange="valueChange"
    ></vp-panel-form>
    <a-button type="primary" @click="submit()"> 提交 </a-button>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive, ref, createVNode } from "vue";
const formRef = ref<any>(null);
const valueChange = (e) => {
  console.log(formRef.value.getValues());
};
const submit = () => {
  console.log(formRef.value.getValues());
  // formRef.value.validated().then((val: any) => {
  //   console.log(val);
  // });

  // fields.value = {
  //   bloodPressure1: {
  //     123: "2321",
  //   },
  //   bloodPressure: {
  //     bloodPressures: [
  //       {
  //         diastolic: 32,
  //         systolic: 123,
  //         time: null,
  //       },
  //       {
  //         diastolic: 23,
  //         systolic: 34324,
  //         time: null,
  //       },
  //     ],
  //   },
  //   jws: {
  //     bs: {
  //       name1: ["1"],
  //     },
  //   },
  //   jzs: null,
  //   ss: {
  //     ssArr: [],
  //   },
  // };
  // console.log(formRef.value);
  //formRef.value.setFields(fields.value)
};
let diseases = [
  { value: "0", label: "无" },
  { value: "1", label: "高血压" },
  { value: "2", label: "糖尿病" },
  { value: "3", label: "房颤" },
  { value: "4", label: "高脂血症" },
  { value: "5", label: "心力衰竭" },
  { value: "6", label: "冠心病" },
  { value: "7", label: "脑卒中" },
  { value: "8", label: "巨大儿分娩史" },
  { value: "9", label: "多囊卵巢综合症" },
  { value: "10", label: "动脉粥样硬化性心血管疾病" },
  { value: "11", label: "肥胖" },
  { value: "12", label: "代谢综合征" },
  { value: "13", label: "风湿热" },
  { value: "14", label: "左心室肥厚" },
  { value: "15", label: "心肌梗死" },
  { value: "16", label: "心脏瓣膜病" },
  { value: "17", label: "短暂性脑缺血发作" },
  { value: "18", label: "心肌病" },
];
const setLinkage = (opts: any, path) => {
  return opts.map((item) => {
    return {
      type: "InputNumber",
      label: item.label,
      field: item.value,
      linkage: `${item.value}|${path}`,
      props: {
        placeholder: "发病年龄",
        addonAfter: "岁",
      },
      value: "",
      span: 24,
    };
  });
};
const arr = setLinkage(diseases, "jb");
let formSchema1 = ref<any>({
  formItem: [
    {
      type: "Panel",
      title: "",
      field: "zlfss",
      children: [
        {
          type: "Checkbox",
          label: createVNode("div", {}, 213),
          field: "zlfs",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择治疗方式",
            },
          ],
          onChange: (val: any) => {
            if (val[val.length - 1] === "isZlfsWu") {
              formRef.value.setValue("zlfss.zlfs", ["isZlfsWu"]);
            } else {
              formRef.value.setValue(
                "zlfss.zlfs",
                val.filter((v: string) => v !== "isZlfsWu")
              );
            }
          },
        },
      ],
    },
    {
      type: "Panel",
      title: "随访信息",
      field: "sui_fang_xin_xi",
      children: [
        {
          type: "Input",
          label: "住院号",
          field: "zhu_yuan_hao",
          span: 8,
          props: {
            placeholder: "请输入住院号",
          },
        },
        {
          type: "Input",
          label: "随访医生",
          field: "sui_fang_yi_sheng",
          span: 8,
          props: {
            placeholder: "请输入随访医生",
          },
          rules: [
            {
              required: true,
              message: "请输入随访医生",
            },
          ],
        },
        {
          type: "DatePicker",
          label: "随访时间",
          field: "sui_fang_shi_jian",
          span: 8,
          props: {
            placeholder: "请输入随访时间",
            format: "YYYY-MM-DD",
          },
          rules: [
            {
              required: true,
              message: "请选择随访时间",
            },
          ],
        },
        {
          type: "Input",
          label: "姓名",
          field: "xing_ming",
          span: 8,
          props: {
            placeholder: "请输入姓名",
          },
          rules: [
            {
              required: true,
              message: "请输入姓名",
            },
          ],
        },
        {
          type: "Radio",
          label: "性别",
          field: "xing_bie",
          span: 8,
          options: [
            { value: "MALE", label: "男" },
            { value: "FEMALE", label: "女" },
            { value: "WZ", label: "未知" },
          ],
          rules: [
            {
              required: true,
              message: "请选择性别",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "年龄",
          field: "nian_ling",
          span: 8,
          props: {
            placeholder: "请输入年龄",
            addonAfter: "岁",
            min: 1,
            max: 150,
          },
          rules: [
            {
              required: true,
              message: "请输入年龄",
            },
          ],
        },
        {
          type: "Input",
          label: "手机号",
          field: "shou_ji_hao",
          span: 12,
          props: {
            placeholder: "请输入手机号",
          },
        },
        {
          type: "InputNumber",
          label: "随访天数",
          field: "sui_fang",
          span: 12,
          props: {
            placeholder: "请输入随访天数",
            addonAfter: "天",
            min: 0,
          },
          rules: [
            {
              required: true,
              message: "请输入随访天数",
            },
          ],
        },
        {
          type: "Radio",
          label: "节律",
          field: "jl",
          span: 12,
          options: [
            { value: "DOULV", label: "窦律" },
            { value: "FANGCHAN", label: "房颤" },
            { value: "FANGPU", label: "房扑" },
            { value: "QITA", label: "其他" },
          ],
          rules: [
            {
              required: true,
              message: "请选择节律",
            },
          ],
        },
        {
          type: "Checkbox",
          label: "检查方式",
          field: "jcfs",
          span: 12,
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择检查方式",
            },
          ],
        },
        {
          type: "Panel",
          title: "食道超声",
          field: "sdcss",
          children: [
            {
              type: "Checkbox",
              label: "",
              field: "sdcs",
              options: diseases,
            },
            {
              type: "Panel",
              field: "children",
              children: [...setLinkage(diseases, "sdcs")],
            },
          ],
        },
        {
          type: "Checkbox",
          label: "症状",
          field: "zheng_zhuang",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择症状",
            },
          ],
        },
        {
          type: "Radio",
          label: "EHRA分级",
          field: "EHRAfj",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择EHRA分级",
            },
          ],
        },
      ],
    },
    {
      type: "Panel",
      title: "查体",
      field: "ct",
      children: [
        {
          type: "InputNumber",
          label: "身高",
          field: "height",
          span: 8,
          props: {
            placeholder: "请输入身高",
            addonAfter: "cm",
            min: 0,
            max: 300,
            onChange: (val: any) => {
              if (parseInt(val)) {
                const w = formRef.value.getValue("ct.weight");
                const h = val / 100;
                if (w && h) {
                  formRef.value.setValue(
                    "ct.BMI",
                    Number((w / (h * h)).toFixed(2))
                  );
                }
              }
            },
          },
          rules: [
            {
              required: true,
              message: "请输入身高",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "体重",
          field: "weight",
          span: 8,
          props: {
            placeholder: "请输入体重",
            addonAfter: "kg",
            min: 0,
            max: 300,
            onChange: (val: any) => {
              if (parseInt(val)) {
                const w = val;
                const h = formRef.value.getValue("ct.height") / 100;
                if (w && h) {
                  formRef.value.setValue(
                    "ct.BMI",
                    Number((w / (h * h)).toFixed(2))
                  );
                }
              }
            },
          },
          rules: [
            {
              required: true,
              message: "请输入体重",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "BMI",
          field: "BMI",
          span: 8,
          props: {
            placeholder: "由身高体重自动计算",
            addonAfter: "Kg/m²",
            min: 0,
            readonly: true,
          },
          rules: [
            {
              required: true,
              message: "",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "收缩压",
          field: "ssy",
          span: 12,
          props: {
            placeholder: "请输入收缩压",
            addonAfter: "mmHg",
            min: 0,
            max: 999,
          },
          rules: [
            {
              required: true,
              message: "请输入收缩压",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "舒张压",
          field: "szy",
          span: 12,
          props: {
            placeholder: "请输入舒张压",
            addonAfter: "mmHg",
            min: 0,
            max: 999,
          },
          rules: [
            {
              required: true,
              message: "请输入舒张压",
            },
          ],
        },
      ],
    },
    {
      type: "Panel",
      title: "检查",
      field: "jc",
      children: [
        {
          type: "Panel",
          title: "心电图",
          field: "xdt",
          children: [
            {
              type: "InputNumber",
              label: "心率",
              field: "xl",
              span: 8,
              props: {
                placeholder: "请输入心率",
                addonAfter: "bpm",
                min: 0,
                max: 999,
              },
            },
            {
              type: "InputNumber",
              label: "QTc",
              field: "QTc",
              span: 8,
              props: {
                placeholder: "请输入QTc",
                addonAfter: "ms",
                min: 0,
                max: 999,
              },
            },
            {
              type: "Input",
              label: "诊断",
              field: "zd",
              span: 8,
              props: {
                placeholder: "请输入诊断",
              },
            },
          ],
        },
        {
          type: "Panel",
          title: "心脏超声",
          field: "xzcs",
          children: [
            {
              type: "InputNumber",
              label: "LVEF",
              field: "LVEF",
              span: 8,
              props: {
                placeholder: "请输入LVEF",
                addonAfter: "%",
                min: 0,
                max: 99,
              },
            },
            {
              type: "InputNumber",
              label: "FS",
              field: "FS",
              span: 8,
              props: {
                placeholder: "请输入FS",
                addonAfter: "%",
                min: 0,
                max: 99,
              },
            },
            {
              type: "InputNumber",
              label: "LVDD",
              field: "LVDD",
              span: 8,
              props: {
                placeholder: "请输入LVDD",
                addonAfter: "%",
                min: 0,
                max: 999,
              },
            },
            {
              type: "InputNumber",
              label: "RVDD",
              field: "RVDD",
              span: 8,
              props: {
                placeholder: "请输入RVDD",
                addonAfter: "mm",
                min: 0,
                max: 999,
              },
            },
            {
              type: "InputNumber",
              label: "LAD",
              field: "LAD",
              span: 8,
              props: {
                placeholder: "请输入LAD",
                addonAfter: "mm",
                min: 0,
                max: 999,
              },
            },
            {
              type: "InputNumber",
              label: "RAD",
              field: "RAD",
              span: 8,
              props: {
                placeholder: "请输入RAD",
                addonAfter: "mm",
                min: 0,
                max: 999,
              },
            },
          ],
        },
        {
          type: "Radio",
          label: "左房血栓",
          field: "zfxs",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择",
            },
          ],
        },
        {
          type: "Checkbox",
          label: "检查方式",
          field: "jcfs",
          options: diseases,
        },
      ],
    },
    {
      type: "Panel",
      title: "检验",
      field: "jy",
      children: [
        {
          type: "InputNumber",
          label: "INR",
          field: "INR",
          props: {
            placeholder: "请输入INR",
            min: 0,
            max: 9999,
          },
        },
        {
          type: "InputNumber",
          label: "BNP",
          field: "BNP",
          props: {
            placeholder: "请输入BNP",
            min: 0,
            max: 99999999,
            addonAfter: "pg/L",
          },
        },
        {
          type: "InputNumber",
          label: "NT-proBNP",
          field: "NT_proBNP",
          props: {
            placeholder: "请输入NT-proBNP",
            min: 0,
            max: 99999999,
            addonAfter: "pg/L",
          },
        },
        {
          type: "InputNumber",
          label: "SCr",
          field: "SCr",
          props: {
            placeholder: "请输入SCr",
            min: 0,
            max: 99999,
            addonAfter: "mg/dl",
          },
        },
        {
          type: "InputNumber",
          label: "CrCL",
          field: "CrCL",
          props: {
            placeholder: "请输入CrCL",
            min: 0,
            max: 99999,
            addonAfter: "ml/min",
          },
        },
      ],
    },
    {
      type: "Panel",
      title: "治疗药物",
      field: "zlyw",
      children: [
        {
          type: "Checkbox",
          label: "抗心率失常药物",
          field: "kxlscyw",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择",
            },
          ],
        },
        {
          type: "Radio",
          label: "抗凝药物",
          span: 12,
          field: "klyw",
          options: diseases,
          rules: [
            {
              required: true,
              message: "请选择抗凝药物",
            },
          ],
        },
        {
          type: "InputNumber",
          label: "连续服用",
          span: 12,
          field: "lxfy",
          props: {
            placeholder: "请输入连续服用天数",
            min: 0,
            addonAfter: "天",
          },
        },
        {
          type: "Checkbox",
          label: "抗血小板药物",
          field: "kxxbyw",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "他汀类药物",
          field: "ttnyw",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "ACEI",
          field: "ACEI",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "ARB",
          field: "ARB",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "钙拮抗剂",
          field: "gjkj",
          options: diseases,
        },
        {
          type: "Radio",
          label: "地高辛",
          field: "dgx",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "利尿剂",
          field: "lnj",
          options: diseases,
        },
      ],
    },
    {
      type: "Panel",
      title: "手术并发症",
      field: "ssbfzs",
      children: [
        {
          type: "Checkbox",
          label: "",
          field: "ssbfz",
          options: diseases,
          onChange: (val: any) => {
            const flag = !val.some((item: any) => item === "isBfzQt");
            formRef.value.setItemShowOrHide("ssbfzs.other", flag);
            formRef.value.setItemShowOrHide("ssbfzs.time", flag);
          },
        },
        {
          type: "Panel",
          field: "children",
          children: [...setLinkage(diseases, "ssbfz")],
        },
      ],
    },
    {
      type: "Panel",
      title: "",
      field: "dfls",
      children: [
        {
          type: "Radio",
          label: "电复律",
          field: "dfl",
          options: [
            { value: "FOU", label: "否" },
            { value: "SHI", label: "是" },
          ],
        },
      ],
    },
    {
      type: "Panel",
      title: "新发临床事件",
      field: "xflcsj",
      children: [
        {
          type: "Radio",
          label: "心力衰竭",
          field: "xlsj",
          options: diseases,
        },
        {
          type: "Radio",
          label: "冠心病",
          field: "gxb",
          options: diseases,
        },
        {
          type: "Radio",
          label: "脑血管病",
          field: "nxgb",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "出血",
          field: "cx",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "血栓",
          field: "xs",
          options: diseases,
        },
        {
          type: "Checkbox",
          label: "药物副作用",
          field: "ywfzy",
          options: diseases,
        },
        {
          type: "Input",
          label: "其他",
          field: "others",
          props: {
            placeholder: "请输入其他",
          },
        },
        {
          type: "Panel",
          title: "住院",
          field: "zy",
          children: [
            {
              type: "Input",
              label: "原因",
              field: "yy",
              span: 12,
              props: {
                placeholder: "请输入原因",
              },
            },
            {
              type: "DatePicker",
              label: "时间",
              field: "sj",
              span: 12,
              props: {
                placeholder: "请选择日期",
                format: "YYYY-MM-DD",
              },
            },
          ],
        },
        {
          type: "Panel",
          title: "死亡",
          field: "dead",
          children: [
            {
              type: "Input",
              label: "原因",
              field: "yy",
              span: 12,
              props: {
                placeholder: "请输入原因",
              },
            },
            {
              type: "DatePicker",
              label: "时间",
              field: "sj",
              span: 12,
              props: {
                placeholder: "请选择日期",
                format: "YYYY-MM-DD",
              },
            },
          ],
        },
      ],
    },
  ],
});
let fields = ref({
  bloodPressure1: {
    123: "",
  },
  bloodPressure: {
    bloodPressures: [
      {
        diastolic: 32,
        systolic: 123,
        time: null,
      },
      {
        diastolic: 23,
        systolic: 34324,
        time: null,
      },
    ],
  },
  jws: {
    bs: {
      name1: ["1", "9"],
    },
  },
  jzs: null,
  ss: {
    ssArr: [],
  },
});
</script>
